<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8">
		<title>LingPowerAI</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript">
			document.write('<script src="../../js/fix.js?rd=?rd=' + Math.random() + '"><\/script>');
		</script>
		<script type="text/javascript">
			link();
		</script>
		<style>
			.titleDiv {
				height: 30px;
				padding-top: 5px;
				font-size: 17px;
			}
			
			.planDiv{
				text-align: center;
				padding-top: 10px;
				height: 75px;
			}
			.planDiv div{
				float: left;
			}
			.planDiv span{
				color: #47BAFE;
				font-size: 22px;
			}
			
			.actionTitle, .actionResult, .xu-line-gray{
				width: 100%;
				margin: 5px auto;
			}
			.actionTitle:first-child{
				font-weight: bold;
			}
			
			.suggestedAction {
				text-align: center; margin: auto;
			}
			
			.chart {
				height: 250px;
				margin: 0px;
				padding: 0px;
				width: 100%;
			}
			.chart .zr-element {
				width: 110% !important;
			}
			.custType {
				width: 50%;
				font-size: 16px;
				color: #888888;
				margin: 17px auto;
			}
			.custCount {
				width: 50%;
				font-size: 26px;
				color: #47BAFE;
				margin: 17px auto;
			}
			
			#addActionManual {
				position: fixed;
				bottom: 10px;
				right: 15px;
				width: 80px;
				height: 80px;
				background: url(../../images/home/fubiao.png) 0 0 no-repeat;
				background-size: 100%;
				text-align: center;
				line-height: 60px;
				color: #fff;
				font-weight: bold;
				font-size: 16px;
				z-index: 99;
			}
			.mui-btn-primary {
				height: 34px;
				width: 200px;
			}
			.mui-btn-block {
				padding: 0;
				font-size: 14px;
			}
			.actionArea {
				padding-top:70px ;
			}
			.actionButton span {
				font-size: 22px !important;
			}
			.xu-line-gray {
				border-top: 1px solid #f3f3f3;
			}
			.actionButton {
				margin: 15px auto 12px;
			}
			.box {
				box-shadow: 0px 1px 9px -2px #47BAFE;
				padding: 3px 10px 3px 20px;
				margin:0;
			}
			#NextActionDetail div p {
				display: flex;
				justify-content: flex-start;
				font-size: 12px;
			}
			#NextActionDetail div p span:first-child {
				flex: 1;
			}
			#NextActionDetail div p span:last-child {
				flex: 3;
			}
			b {
				font-size: 17px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title" style="color:white;">首页</h1>
		</header>

		<div id="addActionManual" class="none"></div>

		<div class="mui-content mui-scroll-wrapper scroll" id="pullrefresh">
			<div class="mui-scroll">
				<!-- 首页无数据 -->
				<div id="NoneCustomerArea" class="none">
					<div class="box box-info" style="height: 120px;">
						<div class="titleDiv">
							<div class="pull-left" style="width: 75%;">
								<span class="littlebluespan"></span>
								<b>今天日程</b>
							</div>
							<div class="pull-right" style="width: 20%; color: dimgray; text-align: right;">
								<span class="mui-icon mui-icon-map"></span>
							</div>
						</div>
						<div class="shi-line-gray"></div>
						<div class="planDiv">
							<div style="width: 33.33%;">
								<p>已计划</p>
								<span>0</span>
							</div>
							<div style="width: 33.33%;">
								<p>行动推荐</p>
								<span>0</span>
							</div>
							<div style="width: 33.33%;">
								<p>已完成</p>
								<span>0</span>
							</div>
						</div>
					</div>
					<div class="mui-content-padded box" style="padding-top: 20px; text-align: center;">
						<div>
							<img src="../../images/home/DATA.png" style="width : 30%" />
						</div>
						<div>
							<a style="color: #47BAFE;">一个日程都没有,快去诊断客户资源,开始你的日程吧</a>
						</div>
						<button id="telImp" class="mui-btn mui-btn-block mui-btn-primary actionButton">
							<span class="mui-icon mui-icon-phone-filled"></span>
							诊断手机联系人潜力
						</button>
						<button id="wxImp" class="mui-btn mui-btn-block mui-btn-primary actionButton">
							<span class="mui-icon mui-icon-weixin"></span>
							诊断微信好友潜力
						</button>
					</div>
				</div>
			</div>

			<!-- 首页-判断有日程完成时 -->
			<div id="HasFinishedActionArea" class="none">
				<div class="mui-slider HasFinishedAction-slider" style="width: unset; margin: 10px;">
					<div id="FinishedActionList" class="mui-slider-group">
						<!-- 已完成但是没有反馈的日程列表 -->
					</div>
				</div>
			</div>

			<!-- 首页 - 智能日历展示 -->
			<div id="AICalendarArea" class="none">
				<div class="box box-info">
					<div class="titleDiv">
						<div class="pull-left" style="width: 75%;">
							<span class="mui-icon fa fa-calendar-minus-o common-font-color-blue"></span>
							<b>今天日程</b>
						</div>
						<div class="pull-right" style="width: 20%; text-align: right;">
							<span id="gotoMap" class="mui-icon mui-icon-map common-font-color-blue"></span>
						</div>
					</div>
					<div class="shi-line-gray"></div>
					<div class="planDiv">
						<div style="width: 33.33%;">
							<p>已计划</p>
							<span id="PlanedSechdualSpan">0</span>
						</div>
						<div style="width: 33.33%;">
							<p>行动推荐</p>
							<span id="SuggestedSechdualSpan">0</span>
						</div>
						<div style="width: 33.33%;">
							<p>已完成</p>
							<span id="FinishedSechdualSpan">0</span>
						</div>
					</div>
					<div class="shi-line-gray"></div>
					<div>
						<span class="mui-icon fa fa-calendar-minus-o common-font-color-blue"></span>
						<b>下个日程</b>
					</div>
					<div id="NextActionDetail" style="display: flex;">
						<!-- 下个日程详情 -->
					</div>
					<div class="shi-line-gray"></div>
					<div id="reviewAllPlanBtn" style="text-align: center;">
						<p>查看全部日程&gt;&gt;</p>
					</div>
				</div>

				<!-- 行动推荐 -->
				<div class="SuggestedActionArea">
					<div class="mui-slider SuggestedAction-slider" style="width: unset; margin: 10px;">
						<div id="SuggestedActionList" class="mui-slider-group">
							<!-- 行动推荐列表 -->
						</div>
					</div>
				</div>

				<!-- 客户分析 -->
				<div class="box box-info">
					<div class="titleDiv">
						<span class="mui-icon fa fa-pie-chart common-font-color-blue"></span>
						<b>客户分析</b>
					</div>
					<div class="shi-line-gray"></div>
					<div style="display: flex;">
						<div style="width: 50%;">
							<div class="pull-left custType">潜在客户</div>
							<div id="lower_cust_Span" class="pull-left custCount">0</div>
							<br />
							<div class="pull-left custType">待联系</div>
							<div id="mid_cust_Span" class="pull-left custCount">0</div>
							<br />
							<div class="pull-left custType">已联系</div>
							<div id="high_cust_Span" class="pull-left custCount">0</div>
						</div>
						<div class="shi-line-gray-column"></div>
						<div style="text-align: center; margin: auto;">
							<div id="pieChart" style="height: 150px; width: 150px;"></div>
						</div>
					</div>
					<div class="shi-line-gray"></div>
					<div id="reviewCustomerReportBtn" style="text-align: center;">
						<p>查看客户详细分析报告&gt;&gt;</p>
					</div>
				</div>

				<!-- 业务趋势 -->
				<div class="box box-info">
					<div class="titleDiv">
						<span class="mui-icon fa fa-pie-chart common-font-color-blue"></span>
						<b>业务趋势</b>
					</div>
					<div class="shi-line-gray"></div>
					<div style="text-align: center; margin: auto;">
						<div class="chart" id="lineChart"></div>
					</div>
				</div>
			</div>
		</div>

		<!-- 已完成但是没有反馈行动列表模板 -->
		<script type="text/html" id="FinishedActionTemplate">
			{{if DATASET==null||DATASET.length==0}}
			<div class="nodata">暂无内容</div>
			{{else}} {{each DATASET as value}}
				<div id="ACTION_{{value.id}}" class="box box-info mui-slider-item">
					<div class="actionTitle pull-left">
						<span>日程({{value.actionName}})是否已完成</span>
						<span class="mui-icon mui-icon-close pull-right" aria-hidden="true" data-id = "{{value.id}}"></span>
					</div>
					<div class="actionResult pull-left">
						<div class="pull-left" style="width: 30%;">结果如何？</div>
						<div>
							<div class="pull-left" style="width: 30%;">
								<span class="mui-icon fa fa-thumbs-up" aria-hidden="true"></span>
								顺利
							</div>
							<div class="pull-left" style="width: 30%;">
								<span class="mui-icon fa fa-thumbs-down" aria-hidden="true"></span>
								不顺利
							</div>
						</div>
					</div>
					<div class="xu-line-gray pull-left"></div>
					<div class="actionArea">
						<button class="mui-btn mui-btn-block mui-btn-primary actionButton" data-id="{{value.id}}">
							<span class="mui-icon mui-icon-mic"></span>
							按住记录语音笔记
						</button>
					</div>
				</div>
			{{/each}} {{/if}}
		</script>
		
		<!-- 下个日程详情模板 -->
		<script type="text/html" id="NextActionDetailTemplate">
			{{if DATASET==null||DATASET.length==0}}
			<div class="nodata">暂无内容</div>
			{{else}} {{each DATASET as record}}
			<div style="width: 70%;">
				<p style="color: #000000; margin-top: 10px;">
					<span>{{record.time}}</span>
					<span>{{record.action}}</span>
				</p>
				<p>
					<span>{{record.date}}</span>
					<span>{{record.contact}}</span>
				</p>
				<p>
					<span>{{record.during}}</span>
					<span>上次互动:{{record.last}}</span>
				</p>
			</div>
			<div class="shi-line-gray-column"></div>
			<div id="today_action_type_div" style="text-align: center; margin: auto;">
				{{if record.type == "phone"}}
				<img onclick="gotoCall('{{record.phone_no}}')" src="../../images/home/call.png" style="width: 40%;" />
				{{else if record.type == "weixin"}}
				<img onclick="gotoWeChat('{{record.wechat_nm}}')" src="../../images/home/wx.png" style="width: 40%;" />
				{{else if record.type == "visit"}}
				<img src="../../images/home/ditu.png" style="width: 40%;" />
				{{else}}
				<img src="../../images/home/wenhao.png" style="width: 40%;" />
				{{/if}}
			</div>
			{{/each}} {{/if}}
		</script>

		<!-- 行动推荐列表模板 -->
		<script type="text/html" id="SuggestedActionTemplate">
			{{if DATASET==null||DATASET.length==0}}
			<div class="nodata">暂无内容</div>
			{{else}} {{each DATASET as value}}
				<div id="IGNORE_{{value.id}}" class="box box-info mui-slider-item">
					<div>
						<b>行动推荐</b>
					</div>
					<div class="shi-line-gray"></div>
					<div style="display: flex;">
						<div>
							{{if value.act_event == "发微信"}}
							<span class="mui-icon fa fa-weixin common-font-color-blue" style="font-size: 25px;"></span>
							{{else}}
							<span class="mui-icon fa fa-phone-square common-font-color-blue" style="font-size: 25px;"></span>
							{{/if}}
						</div>
						<div style=" padding-left: 10px;">
							<p style="color: #000000;">
								<span>{{value.cust_nm}}{{value.act_nm}},联系一下</span>
							</p>
							<p>
								<span>推荐日程：{{value.act_expire_date}}</span>
							</p>
							<p>
								<!-- <span>上次互动：{{value.lastAction}}</span> -->
								<span>上次互动：--</span>
							</p>
						</div>
					</div>
					<div class="shi-line-gray"></div>
					<div class="suggestedActionBtnArea" style="display: flex;">
						<div class="suggestedAction">
							{{if value.act_event == "发微信"}}
								<img onclick="gotoWeChat('{{value.wechat_nm}}')" src="../../images/home/wx.png" style="width: 30%;" />
								<br />
								<span>立即联系</span>
							{{else}}
								<img onclick="gotoCall('{{value.phone_no}}')" src="../../images/home/call.png" style="width: 30%;" />
								<br />
								<span>立即电话</span>
							{{/if}}
						</div>
						<div class="shi-line-gray-column"></div>
						<div class="suggestedAction" onclick="gotoAdd2Plan('{{value.id}}')">
							<img src="../../images/home/richeng.png" style="width: 30%;" />
							<br />
							<span>加入日程</span>
						</div>
						<div class="shi-line-gray-column"></div>
						<div class="suggestedAction" onclick="gotoIgnore('{{value.id}}')">
							<img src="../../images/home/hl.png" style="width: 30%;" />
							<br />
							<span>忽略</span>
						</div>
						<div class="shi-line-gray-column"></div>
					</div>
				</div>
			{{/each}} {{/if}}
		</script>

		<script type="text/javascript">
			script(["../../libs/echarts/echarts-all.js"]);
		</script>

		<script type="text/javascript">
			var suggest_slider2;
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: { //下拉刷新
						callback: pulldownRefresh,
						style: mui.os.android ? "circle" : "default"
					}
				},
				beforeback: function() {
					appPage.closeLogin();
				}
			});

			mui.plusReady(function() {
			// mui.ready(function() {

				//绑定[行动地图]事件
				document.getElementById("gotoMap").addEventListener("tap", function() {
					mui.alert("【行动地图】功能尚未开放!");
				});

				//绑定[悬浮按钮]事件
				document.getElementById("addActionManual").addEventListener("tap", function() {
					mui.alert("【悬浮按钮】功能尚未开放!");
					// openNew("");
				});

				//绑定[查看所有日程]事件
				document.getElementById("reviewAllPlanBtn").addEventListener("tap", function() {
					mui.alert("【查看所有日程】功能尚未开放!");
					// openNew("");
				});

				//绑定[查看heuristic详细分析报告]事件
				document.getElementById("reviewCustomerReportBtn").addEventListener("tap", function() {
					// mui.alert("【查看heuristic详细分析报告】功能尚未开放!");
					openNew("../customer/custAnalysisReport.html");
				});

				getData();
			});

			//下拉刷新具体业务实现
			function pulldownRefresh() {

				//初始化当前页
				initPage();

				setTimeout(function() {

					//下拉刷新结束
					getData();
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					//重置上拉加载
					// mui('#pullrefresh').pullRefresh().refresh(true);
					//重置页码
					page = 1;
				}, 1000);
			}

			function initPage() {
				if (!document.getElementById("NoneCustomerArea").classList.contains("none")) {
					document.getElementById("NoneCustomerArea").classList.add("none");
				}
				if (!document.getElementById("HasFinishedActionArea").classList.contains("none")) {
					document.getElementById("HasFinishedActionArea").classList.add("none");
				}
				if (!document.getElementById("AICalendarArea").classList.contains("none")) {
					document.getElementById("AICalendarArea").classList.add("none");
				}
			}

			function getData() {
				storage.init();
				storageUser = kidstorageuser.getInstance();

				//获取当前用户是否有客户信息
				// requestJsonFile("../../data/home/NoneCustomer.json", {}, function(result_none) {
				request("/sqldb/CountCustomerBySalesId/", {id:storageUser.UId}, function(result_none) {
					if (result_none[SysConstants.DATASET_KEY].CUST_CNT == 0) {
						document.getElementById("NoneCustomerArea").classList.remove("none");
					} else {
						requestJsonFile("../../data/home/FinishedActionTemplate.json", {}, function(result_finished) {
							if (result_finished[SysConstants.DATASET_KEY].length > 0) {
								document.getElementById("HasFinishedActionArea").classList.remove("none");

								//动态生成已完成行动卡片信息
								render("#FinishedActionList", "FinishedActionTemplate", result_finished);
								//动态加载滑动控件时需要手动调用一下滑动事件
								var slider1 = mui(".HasFinishedAction-slider");
								slider1.slider();
								// appPage.imgInit();
								//四个标签页二级
								mui(".actionTitle").on("tap", ".mui-icon-close", function() {
									if (this.dataset.id != "") {
										var i = slider1.slider().getSlideNumber();
										document.getElementById("ACTION_" + this.dataset.id).remove();
										if(i > 0){
											slider1.slider().prevItem();
										}
									}
								});
								
								mui(".actionArea").on("tap", "button", function() {
									mui.alert("你点击了ID为" + this.dataset.id + "的录音及语音识别功能");
								});
							}
						});

						//处理悬浮按钮
						document.getElementById("addActionManual").classList.remove("none");
						document.getElementById("AICalendarArea").classList.remove("none");

						//动态生成今天日程统计数字
						requestJsonFile("../../data/home/todayActionCount.json", {}, function(result_count) {
							document.getElementById("PlanedSechdualSpan").innerText = result_count[SysConstants.DATASET_KEY].PS_CNT;
							document.getElementById("SuggestedSechdualSpan").innerText = result_count[SysConstants.DATASET_KEY].SS_CNT;
							document.getElementById("FinishedSechdualSpan").innerText = result_count[SysConstants.DATASET_KEY].FS_CNT;
						});

						//动态生成下个日程数据
						requestJsonFile("../../data/home/nextAction.json", {}, function(result) {
							render("#NextActionDetail", "NextActionDetailTemplate", result);
						});

						//动态生成客户统计
						// requestJsonFile("../../data/home/customerCount.json", {}, function(result) {
						request("/sqldb/getAnalysisCountValue/", {id:storageUser.UId}, function(result) {
							if(result[SysConstants.DATASET_KEY].length > 0){
								var record = result[SysConstants.DATASET_KEY][0];
								document.getElementById("lower_cust_Span").innerText = record.LOW_CNT;
								document.getElementById("mid_cust_Span").innerText = record.MID_CNT;
								document.getElementById("high_cust_Span").innerText = record.HIGH_CNT;
							}else{
								document.getElementById("lower_cust_Span").innerText = "N/A";
								document.getElementById("mid_cust_Span").innerText = "N/A";
								document.getElementById("high_cust_Span").innerText = "N/A";
							}
						});

						//动态生成行动推荐卡片信息
						// requestJsonFile("../../data/home/SuggestedActionTemplate.json", {}, function(result_suggested) {
						request("/sqldb/getCurDateSuggestAction/", {id:storageUser.UId,work_date:"2019-05-20"}, function(result_suggested) {
							render("#SuggestedActionList", "SuggestedActionTemplate", result_suggested);
							//动态加载滑动控件时需要手动调用一下滑动事件
							suggest_slider2 = mui(".SuggestedAction-slider");
							suggest_slider2.slider();
							//四个标签页二级
							// mui(".suggestedActionBtnArea").on("tap", ".suggestedAction", function() {
							// 	mui.alert("你点击了ID为" + this.dataset.id + "的行动推荐卡片!");
							// });
						});

						//生成客户分析图
						var pieChartOption = {
							calculable: false,
							series: [{
								name: "",
								type: "pie",
								radius: ["30%", "88%"],
								center: ["47%", "50%"],
								itemStyle: {
									normal: {
										label: {
											position: "inner",
											formatter: function(params) {
												return params.name + ":" + params.value + "\n\r(" + (params.percent - 0).toFixed(0) + '%)'
											}
										},
										labelLine: {
											show: false
										}
									},
									emphasis: {
										label: {
											show: true,
											formatter: "{b}\n{d}%"
										}
									}
								},
								data: [{
									value: 30,
									name: "高",
									selected: true
								}, {
									value: 25,
									name: "中"
								}, {
									value: 45,
									name: "低"
								}]
							}]
						};
						var pieChartDiv = document.getElementById("pieChart");
						var pieChart = echarts.init(pieChartDiv);
						pieChart.setOption(pieChartOption);

						//生成业务趋势图
						var lineChartOption = {
							calculable: false,
							legend: {
								data: ["行动推荐", "计划日程", "成交量"]
							},
							xAxis: [{
								type: "category",
								data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
							}],
							yAxis: [{
								type: "value"
							}],
							series: [{
								name: "行动推荐",
								type: "line",
								data: [20, 49, 70, 232, 256, 767, 800, 600, 326, 200, 64, 33]
							}, {
								name: "计划日程",
								type: "line",
								data: [10, 24, 40, 150, 140, 450, 700, 300, 100, 170, 500, 1000]
							}, {
								name: "成交量",
								type: "line",
								data: [5, 16, 20, 12, 32, 40, 45, 33, 50, 55, 50, 56]
							}]
						};

						var lineChartDiv = document.getElementById("lineChart");
						var lineChart = echarts.init(lineChartDiv);
						lineChart.setOption(lineChartOption);
					}
				});
			}
			
			function gotoWeChat(wechat_nm){
				mui.alert("【打开微信联系人】功能改进中...");
			}
			
			function gotoCall(phone_no){
				if(mui.os.plus){
					plus.device.dial(phone_no);
				}else{
					location.href = "tel:" + phone_no;
				}
			}
			
			function gotoAdd2Plan(id){
				mui.alert("【加入日程】功能建设中...");
			}
			
			function gotoIgnore(id){
				requestJsonFile("../../data/home/NoneCustomer.json", {action_id:id}, function(result) {
					if(result[SysConstants.ERROR_CODE_KEY] == SysConstants.ERROR_CODE_OBJECT.ERROR_CODE_SUCCESS) {
						//删除当前卡片
						var i = suggest_slider2.slider().getSlideNumber();
						document.getElementById("IGNORE_" + id).remove();
						if(i > 0){
							suggest_slider2.slider().prevItem();
						}
						mui.toast("操作成功");
					}
				});
			}
		</script>
	</body>

</html>
